<template>
  <div>
    <van-nav-bar
    title="文章详情"
    left-arrow
    fixed
    @click-left="$router.back('/')"
    />

    <h3>关键时刻，莫迪受重挫</h3>

    <div class="image">
      <img src="../assets/logo.png" alt="" >
    <div class="author">
      <p>作者</p>
      <p>2021-12-01</p>
    </div>
    <div class="concern">
      <p> <van-icon name="plus" />已关注</p>
      <!-- <van-icon name="plus" />已关注 -->
    </div>
    </div>

    <van-divider />

    <div class="content">
      在新冠疫情肆虐的印度，总理莫迪面临新的政治麻烦。 据英国《卫报》报道 ，印度总理莫迪在关键的西孟加拉邦选举中遭遇罕见的政治失败。有迹象表明选民对他处理新冠疫情的做法不满。
	    报道称，疫情期间缩短投票时间，并将选举活动转到网上，但由印度人民党控制的选举委员会拒绝了该提议。在首府加尔各答，一些实验室称，检测结果显示新冠阳性比例高达50%。
	    莫迪未能夺取孟加拉，原因跟他处理疫情不力有关。
	    当天，专栏作家斯瓦迪查图尔维第在新德里电视台网站撰文评论：“印人党并非一股不可阻挡的力量。它可以被一个根基强固的地区领导人打败。政治钟摆现在正离开印度人民党。中央政府对汹涌疫情的糟糕处理及其悲剧性的缺氧将使莫迪付出代价。”
    </div>
     
    <div class="comments">
      <img src="../assets/1.jpg" alt="" >
      <div class="author-z">
        <p>张张</p>
        <h2>不错</h2>
        <p><van-icon name="good-job" size="20px" color="red"/>21</p>
        <p>2021-05-12 <span>3 回复</span></p>
      </div>
      </div>

      <div class="bottom">
        <p>写评论</p>
        <p><van-icon name="comment-o"  size="20px"/>
       <van-icon name="star"  size="20px"/>
        <van-icon name="good-job" size="20px" color="red"/>
        <van-icon name="share"  size="20px"/></p>
      </div>
  </div>
</template>

<script>
import { Cell, CellGroup,Icon ,Divider} from 'vant';
export default {
    data(){
        return{

        }
    },
    components:{
      [Cell.name]:Cell,
      [CellGroup .name]:CellGroup ,
      [Icon .name]:Icon ,
      [Divider .name]:Divider ,
    },
    methods:{
        
    }
}
</script>

<style lang="less">
  h3{
    position: relative;
    top: 50px;
    padding:0 20px;
  }
  image{
    position:relative;
    top: 0px;
  }
  .image img{
    position: relative;
    top: 8.33333vw;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #ccc;
    margin: 20px 20px;
  }
  .author{
    // margin-top: -75px;
    // margin-left: 75px;
    // font-size: 10px;

    margin-top: -12vw;
    margin-left: 20vw;
    font-size: 2.66667vw;
  
  }
  p:nth-child(2){
    color:rgb(168, 167, 167) ;
  }

  .concern{
    width: 80px;
    height: 30px;
    line-height: 0px;
    float: right;
    margin-top:-50px ;
    border-radius: 20px;
    justify-content: center;
    align-content: center;
    border: 1px solid #ccc;
    text-align: center;
    
  }
  .content{
    padding:0 20px;
    letter-spacing: 3px;
    line-height: 23px;
  }

  .comments{
    height: 200px;
  }

  .comments img{
        background-color: #fff;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        border: 1px solid #ccc;
        margin: 20px 20px;
  }
  .comments p:nth-child(1){
    color: rgba(39, 88, 224, 0.742);
    font-size: 15px;
  }

  .comments p:nth-child(3){
    float: right;
    padding: 20px;
    margin-top: -80px;
  }
  .author-z{
    margin-top: -75px;
    margin-left: 75px;
    font-size: 10px;
  }
  .author-z p span{
    height: 20px;
    width: 30px;
    border-radius: 20px;
    padding: 5px;
    text-align: center;
    border: 1px solid #ccc;
   right: 5px;
  }
  .bottom{
    border-top: 1px solid #ccc
  }
  .bottom p:nth-child(1){
    width: 180px;
    height: 30px;
    border-radius: 20px;
    text-align: center;
    line-height: 30px;
    margin: 10px;
    border: 1px solid #ccc;
  }

  .bottom p{
    float: left;
    letter-spacing: 20px;
    margin-right: -20px;
  }
</style>